<template>
	<picker mode="multiSelector" :range="areaList" range-key="value" @columnchange="columnchange" @change="change">
		<view style="">
			{{selectName || '请选择省市区'}}
		</view>
	</picker>
</template>

<script>
	export default {
		data() {
			return {
				areaList: [
					[],
					[],
					[]
				],
				selectIndex: [-1, -1, -1],
				selectName: ''
			}
		},
		mounted() {
			this.getArea(1)
		},
		methods: {
			async getArea(level = 1, superior = 0) {
				// 动态参数名
				const paramName = ['占位', '占位', 'provinceid', 'cityid', 'areaid']
				let params = {
					level: level
				}
				// 如果查询市和区则应该带上级id
				if (superior > 0) params[paramName[level]] = superior
				// 获取数据
				const {
					data
				} = await this.$request('/common/city/getCity', params)
				// 如果是获取省份列表
				this.areaList[level - 1] = data.map(item => {
					return {
						value: item[paramName[level + 1].slice(0, -2)],
						key: item[paramName[level + 1]]
					}
				})
				if (level === 3) this.areaList = [...this.areaList]
				else this.getArea(level + 1, this.areaList[level - 1][0].key)
			},
			columnchange(e) {
				if (e.detail.column === 2) return
				this.getArea(e.detail.column + 2, this.areaList[e.detail.column][e.detail.value].key)
			},
			change(e) {
				this.selectIndex = e.detail.value
				this.selectName = `${this.areaList[0][this.selectIndex[0]].value} ${this.areaList[1][this.selectIndex[1]].value} ${this.areaList[2][this.selectIndex[2]].value}`
			}

		}
	}
</script>

<style>
	a {
		position: fixed;
		transform: translateX(-50%);
	}
</style>
